<template>
	<view class="cooperation-container">
		<!-- 背景装饰图片 -->
		<image :src="pageImages.cooperation_background" class="background-decoration" mode="aspectFill"></image>
		<view class="background-overlay"></view>

		<!-- 顶部切换标签 -->
		<view class="tab-bar">
			<view
				class="tab-item"
				:class="{ active: activeTab === 'vip' }"
				@click="switchTab('vip')"
			>
				<text class="tab-text">VIP会员</text>
			</view>
			<view
				class="tab-item"
				:class="{ active: activeTab === 'cooperation' }"
				@click="switchTab('cooperation')"
			>
				<text class="tab-text">合作招募</text>
			</view>
		</view>

		<!-- VIP会员内容 -->
		<view v-if="activeTab === 'vip'" class="vip-content">
			<!-- VIP介绍 -->
			<view class="vip-intro">
				<image :src="pageImages.vip_intro_banner" class="vip-banner" mode="aspectFill"></image>
				<view class="vip-intro-text">
					<text class="intro-title">尊享VIP会员特权</text>
					<text class="intro-subtitle">专属服务 · 优惠价格 · 优先体验</text>
				</view>
			</view>

			<!-- VIP等级 -->
			<view class="vip-levels">
				<view class="section-title">
					<text class="title-text">会员等级</text>
				</view>
				<view class="level-list">
					<view class="level-item" v-for="level in vipLevels" :key="level.id">
						<view class="level-header">
							<image :src="level.icon" class="level-icon"></image>
							<view class="level-info">
								<text class="level-name">{{ level.name }}</text>
								<text class="level-condition">{{ level.condition }}</text>
							</view>
						</view>
						<view class="level-benefits">
							<view class="benefit-item" v-for="benefit in level.benefits" :key="benefit">
								<text class="benefit-text">• {{ benefit }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- VIP权益 -->
			<view class="vip-benefits">
				<view class="section-title">
					<text class="title-text">专属权益</text>
				</view>
				<view class="benefits-grid">
					<view class="benefit-card" v-for="benefit in vipBenefits" :key="benefit.id">
						<image :src="benefit.icon" class="benefit-icon"></image>
						<text class="benefit-name">{{ benefit.name }}</text>
						<text class="benefit-desc">{{ benefit.description }}</text>
					</view>
				</view>
			</view>

			<!-- 成为VIP -->
			<view class="become-vip">
				<button class="vip-btn" @click="applyVIP">立即成为VIP</button>
			</view>
		</view>

		<!-- 合作招募内容 -->
		<view v-if="activeTab === 'cooperation'" class="cooperation-content">
			<!-- 合作介绍 -->
			<view class="cooperation-intro">
				<image :src="pageImages.cooperation_banner" class="cooperation-banner" mode="aspectFill"></image>
				<view class="cooperation-intro-overlay">
					<view class="cooperation-intro-text">
						<text class="intro-title">与美好同行</text>
						<view class="intro-content">
							<text class="intro-paragraph">不必困于朝九晚五的格子间，不必在"安稳"与"热爱"间反复拉扯。在这里，你可以把对生活的热忱化作事业的底气，用对美的独到眼光链接更多同频的灵魂。</text>
							<text class="intro-paragraph">我们为你准备了从选品到运营的全链路支撑，让专业成为你的铠甲。你不必独自面对风雨，却能拥有独当一面的成长。让我们一同日积月累，用专业和眼界来驱动自己，从珠宝的爱好者，到生活的掌舵人。</text>
							<text class="intro-paragraph">别让犹豫辜负了心中的光。那些你曾向往的自由与成就，或许就藏在这一次选择里。与我们并肩，让每一颗宝石都成为你故事里的注脚，让我们一同见证平凡到不凡的蜕变。</text>
							<text class="intro-highlight">加入我们，让热爱发光，让梦想值钱。</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 申请合作 -->
			<view class="apply-cooperation">
				<view class="apply-form">
					<view class="form-item">
						<text class="form-label">姓名</text>
						<input class="form-input" v-model="cooperationForm.name" />
					</view>
					<view class="form-item">
						<text class="form-label">联系电话</text>
						<input class="form-input" v-model="cooperationForm.phone" />
					</view>
					<view class="form-item">
						<text class="form-label">合作意向</text>
						<picker :value="cooperationForm.intentionIndex" :range="cooperationIntentions" @change="onIntentionChange">
							<view class="picker-view">
								{{ cooperationIntentions[cooperationForm.intentionIndex] || '请选择合作意向' }}
							</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="form-label">详细说明</text>
						<textarea class="form-textarea" v-model="cooperationForm.description" placeholder="请详细描述您的合作想法和资源优势"></textarea>
					</view>
				</view>
				<button class="submit-btn" @click="submitCooperation">提交申请</button>
			</view>
		</view>
	</view>
</template>

<script>
import { getPageImages } from '@/utils/imageConfig.js'
import { post } from '@/utils/request.js'

export default {
	data() {
		return {
			activeTab: 'vip',
			// 页面图片配置
			pageImages: {
				cooperation_background: '/static/background.jpg',
				cooperation_banner: '/static/icons/定制图.jpg',
				vip_intro_banner: '/static/icons/4.jpg'
			},
			// VIP等级数据
			vipLevels: [
				{
					id: 1,
					name: '银卡会员',
					condition: '累计消费满2000元',
					icon: '/static/icons/7bf41bf4e46a0f9b023ff8153baa6538bb6796fd501d1-aL2tWF.jpg',
					benefits: ['9.5折优惠', '生日特惠', '新品优先通知'],
					iconKey: 'vip_silver_icon'
				},
				{
					id: 2,
					name: '金卡会员',
					condition: '累计消费满10000元',
					icon: '/static/icons/08ff0bd53a8643cd360e68f761bc2c25.jpg',
					benefits: ['9折优惠', '免费清洗保养', '专属客服', '定制咨询'],
					iconKey: 'vip_gold_icon'
				},
				{
					id: 3,
					name: '钻石会员',
					condition: '累计消费满50000元',
					icon: '/static/icons/21d3be7614c2c24dda59c2a40eb33649.jpg',
					benefits: ['8.5折优惠', '免费上门服务', '专属设计师', '年度礼品'],
					iconKey: 'vip_diamond_icon'
				}
			],
			// VIP权益
			vipBenefits: [
				{
					id: 1,
					name: '专属折扣',
					description: '享受会员专属价格优惠',
					icon: '/static/icons/0.jpg',
					iconKey: 'vip_benefit_discount_icon'
				},
				{
					id: 2,
					name: '优先服务',
					description: '新品发布优先体验',
					icon: '/static/icons/08ff0bd53a8643cd360e68f761bc2c25.jpg',
					iconKey: 'vip_benefit_priority_icon'
				},
				{
					id: 3,
					name: '免费保养',
					description: '定期免费清洗保养服务',
					icon: '/static/icons/09.webp',
					iconKey: 'vip_benefit_maintenance_icon'
				},
				{
					id: 4,
					name: '专属客服',
					description: '一对一专属客服服务',
					icon: '/static/icons/3.jpg',
					iconKey: 'vip_benefit_service_icon'
				}
			],

			// 合作申请表单
			cooperationForm: {
				name: '',
				phone: '',
				intentionIndex: 0,
				description: ''
			},
			// 合作意向选项
			cooperationIntentions: ['区域代理', '加盟合作', '分销合作', '其他合作']
		}
	},
	async onLoad() {
		await this.loadPageImages();
		this.initPageData();
	},
	methods: {
		// 加载页面图片配置
		async loadPageImages() {
			try {
				const images = await getPageImages('cooperation');

				if (images.cooperation_background) {
					this.pageImages.cooperation_background = images.cooperation_background.url;
				}
				if (images.cooperation_banner) {
					this.pageImages.cooperation_banner = images.cooperation_banner.url;
				}
				if (images.vip_intro_banner) {
					this.pageImages.vip_intro_banner = images.vip_intro_banner.url;
				}

				// 更新VIP等级图标
				for (let i = 0; i < this.vipLevels.length; i++) {
					const vip = this.vipLevels[i];
					if (vip.iconKey && images[vip.iconKey]) {
						this.vipLevels[i].icon = images[vip.iconKey].url;
					}
				}

				// 更新VIP权益图标
				for (let i = 0; i < this.vipBenefits.length; i++) {
					const benefit = this.vipBenefits[i];
					if (benefit.iconKey && images[benefit.iconKey]) {
						this.vipBenefits[i].icon = images[benefit.iconKey].url;
					}
				}

				console.log('合作页面图片配置加载完成');
			} catch (error) {
				console.warn('加载页面图片配置失败，使用默认图片:', error);
			}
		},

		// 初始化页面数据
		initPageData() {
			console.log('合作页面初始化完成');
		},
		
		// 切换标签
		switchTab(tab) {
			this.activeTab = tab;
		},
		
		// 申请VIP
		applyVIP() {
			console.log('VIP按钮被点击了');
			try {
				uni.showModal({
					title: '申请VIP',
					content: '请联系客服申请VIP会员，或通过消费自动升级',
					confirmText: '联系客服',
					cancelText: '取消',
					success: (res) => {
						console.log('模态框响应:', res);
						if (res.confirm) {
							// 跳转到预约页面或显示客服联系方式
							uni.switchTab({
								url: '/pages/appointment/appointment'
							});
						}
					},
					fail: (error) => {
						console.error('显示模态框失败:', error);
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					}
				});
			} catch (error) {
				console.error('applyVIP方法出错:', error);
				uni.showToast({
					title: '系统错误',
					icon: 'none'
				});
			}
		},
		
		// 合作意向选择
		onIntentionChange(e) {
			this.cooperationForm.intentionIndex = e.detail.value;
		},
		
		// 提交合作申请
		async submitCooperation() {
			console.log('合作申请按钮被点击了');
			try {
				// 表单验证
				if (!this.cooperationForm.name.trim()) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}
				
				if (!this.cooperationForm.phone.trim()) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					});
					return;
				}
				
				// 手机号格式验证
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(this.cooperationForm.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				
				console.log('表单数据:', this.cooperationForm);
				
				// 准备提交数据
				const submitData = {
					name: this.cooperationForm.name.trim(),
					phone: this.cooperationForm.phone.trim(),
					intention: this.cooperationIntentions[this.cooperationForm.intentionIndex],
					description: this.cooperationForm.description.trim()
				};
				
				console.log('提交数据:', submitData);
				
				// 显示加载提示
				uni.showLoading({
					title: '提交中...'
				});
				
				// 调用API提交申请
				const response = await post('/cooperation-applications/submit', submitData);
				
				uni.hideLoading();
				
				// 提交成功
				uni.showToast({
					title: response.message || '申请提交成功',
					icon: 'success',
					duration: 2000
				});
				
				// 清空表单
				this.cooperationForm = {
					name: '',
					phone: '',
					intentionIndex: 0,
					description: ''
				};
				
			} catch (error) {
				uni.hideLoading();
				console.error('submitCooperation方法出错:', error);
				
				// 显示错误信息
				const errorMessage = error.message || '提交失败，请稍后重试';
				uni.showToast({
					title: errorMessage,
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
}
</script>

<style scoped>
.cooperation-container {
	background: linear-gradient(135deg, #f5f1e8 0%, #ede4d3 50%, #e8dcc6 100%);
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	font-family: 'SimHei', 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

/* 背景装饰 */
.background-decoration {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
	opacity: 0.08;
	pointer-events: none; /* 禁用指针事件 */
}

.background-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(135deg,
		rgba(212, 175, 55, 0.03) 0%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(212, 175, 55, 0.03) 100%);
	z-index: 2;
	pointer-events: none; /* 禁用指针事件 */
}

/* 标签栏样式 */
.tab-bar {
	display: flex;
	background: linear-gradient(135deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.9) 100%);
	backdrop-filter: blur(10px);
	border-bottom: 1rpx solid rgba(212, 175, 55, 0.2);
	position: relative;
	z-index: 100;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 30rpx 0;
	position: relative;
}

.tab-item.active {
	color: #D4AF37;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #D4AF37;
}

.tab-text {
	font-size: 32rpx;
	font-weight: bold;
}

/* 通用样式 */
.vip-content,
.cooperation-content {
	padding-bottom: 40rpx;
	position: relative;
	z-index: 1;
}

.section-title {
	margin: 40rpx 30rpx 30rpx;
}

.title-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

/* VIP介绍样式 */
.vip-intro {
	position: relative;
	height: 400rpx;
	margin-bottom: 20rpx;
	z-index: 1;
}

.vip-banner {
	width: 100%;
	height: 100%;
}

.vip-intro-text {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	padding: 60rpx 40rpx 40rpx;
	color: #FFFFFF;
	max-height: 350rpx;
	overflow-y: auto;
}

/* 合作介绍样式 - 重新设计 */
.cooperation-intro {
	position: relative;
	height: 60vh; /* 减少高度避免遮挡下方内容 */
	margin-bottom: 20rpx;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cooperation-banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none; /* 禁用指针事件 */
}

.cooperation-intro-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60rpx 40rpx;
	pointer-events: none; /* 禁用指针事件 */
}

.cooperation-intro-text {
	position: relative;
	z-index: 3;
	color: #FFFFFF;
	text-align: center;
	max-width: 600rpx;
}

.intro-title {
	font-size: 48rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
	color: #000000;
}

.intro-subtitle {
	font-size: 28rpx;
	opacity: 0.9;
}

.intro-content {
	margin-top: 20rpx;
}

.intro-paragraph {
	font-size: 26rpx;
	line-height: 1.8;
	opacity: 0.9;
	display: block;
	margin-bottom: 20rpx;
	color: #000000;
}

.intro-highlight {
	font-size: 28rpx;
	font-weight: bold;
	color: #D4AF37;
	display: block;
	margin-top: 10rpx;
}

/* VIP等级样式 */
.vip-levels {
	background: linear-gradient(135deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.9) 100%);
	backdrop-filter: blur(10px);
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(212, 175, 55, 0.15);
	border: 1rpx solid rgba(212, 175, 55, 0.1);
	position: relative;
	z-index: 3;
}

.level-list {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.level-item {
	background-color: #FAFAFA;
	border-radius: 12rpx;
	padding: 30rpx;
}

.level-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.level-icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 30rpx;
}

.level-info {
	flex: 1;
}

.level-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	display: block;
	margin-bottom: 10rpx;
}

.level-condition {
	font-size: 26rpx;
	color: #666666;
}

.level-benefits {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.benefit-item {
	display: flex;
	align-items: center;
}

.benefit-text {
	font-size: 26rpx;
	color: #666666;
}

/* VIP权益样式 */
.vip-benefits {
	background: linear-gradient(135deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.9) 100%);
	backdrop-filter: blur(10px);
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(212, 175, 55, 0.15);
	border: 1rpx solid rgba(212, 175, 55, 0.1);
	position: relative;
	z-index: 3;
}

.benefits-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30rpx;
}

.benefit-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 30rpx 20rpx;
	background-color: #FAFAFA;
	border-radius: 12rpx;
}

.benefit-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 20rpx;
}

.benefit-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10rpx;
}

.benefit-desc {
	font-size: 24rpx;
	color: #666666;
	line-height: 1.6;
}

/* 成为VIP按钮 */
.become-vip {
	padding: 40rpx;
}

.vip-btn {
	width: 100%;
	background-color: #D4AF37;
	color: #FFFFFF;
	border: none;
	border-radius: 50rpx;
	padding: 30rpx 0;
	font-size: 36rpx;
	font-weight: bold;
	z-index: 999; /* 确保按钮在最上层 */
	position: relative;
	cursor: pointer;
}



/* 申请合作样式 */
.apply-cooperation {
	background: linear-gradient(135deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.9) 100%);
	backdrop-filter: blur(10px);
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(212, 175, 55, 0.15);
	border: 1rpx solid rgba(212, 175, 55, 0.1);
	position: relative;
	z-index: 3;
}

.apply-form {
	margin-bottom: 40rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-label {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
	display: block;
	margin-bottom: 15rpx;
}

.form-input,
.form-textarea {
	width: 100%;
	background-color: #F5F5F5;
	border: 1rpx solid #E0E0E0;
	border-radius: 12rpx;
	padding: 25rpx 20rpx;
	font-size: 28rpx;
	color: #333333;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	z-index: 999; /* 确保输入框在最上层 */
	position: relative;
}

.form-textarea {
	height: 200rpx;
	resize: none;
}

.picker-view {
	background-color: #F5F5F5;
	border: 1rpx solid #E0E0E0;
	border-radius: 12rpx;
	padding: 25rpx 20rpx;
	font-size: 28rpx;
	color: #333333;
	box-sizing: border-box;
	z-index: 999; /* 确保picker在最上层 */
	position: relative;
}

.submit-btn {
	width: 100%;
	background-color: #D4AF37;
	color: #FFFFFF;
	border: none;
	border-radius: 50rpx;
	padding: 30rpx 0;
	font-size: 36rpx;
	font-weight: bold;
	z-index: 999; /* 确保按钮在最上层 */
	position: relative;
	cursor: pointer;
}
</style>
